<template>
  <div class="pie-container" ref="mileage"></div>
</template>
<script>
import * as echarts from "echarts";
import { EleResize } from "@/utils/resize/index.js";
let mileageEcharts = null;
let flag = false;
export default {
  props: {
    pieData: {
      type: Array,
      required: true,
    },
    unit: {
      type: String,
    },
  },
  data() {
    return {
      mileageEcharts: "", //行驶里程分布echarts
      newPieData: [],
      option: "",
      startCharts: null,
    };
  },
  watch: {
    pieData: {
      handler(newData, oldData) {
        this.newPieData = newData;
        if (this.newPieData && this.newPieData.length > 0) {
          this.$nextTick(() => {
            this.pie();
          });
        }
      },
      immediate: true,
      deep: true, // 如果是对象要深度监听
    },
  },
  methods: {
    pie() {
      this.$nextTick(() => {
        // var flag = true; // 为了做判断：当鼠标移动上去的时候，自动高亮就被取消
        let _this = this;
        let index = 0;
        let isSet = false;
        mileageEcharts = echarts.init(this.$refs.mileage);
        mileageEcharts.dispose();
        mileageEcharts = echarts.init(this.$refs.mileage);
        mileageEcharts.clear();
        mileageEcharts.resize();
        const pieData1 = [];
        const pieName1 = [];
        for (let i = 0; i < this.newPieData.length; i++) {
          pieName1.push(this.newPieData[i].month);
          pieData1.push(this.newPieData[i].price);
        }
        let option = {
          color: [
            // "#09F5BC",
            // "#FFFBE5",
            // "#0A2A35",
            // "#03387a",
            // "#03387a",
            // "#6c93ee",
            // "#a9abff",
            // "#f7a23f",
            // "#27bae7",
            // "#ff6d9d",
            // "#cb79ff",
            // "#f95b5a",
            // "#ccaf27",
            // "#38b99c",
            // "#93d0ff",
            // "#bd74e0",
            // "#fd77da",
            // "#dea700",
          ],
          grid: {
            containLabel: true,
            left: 20,
            right: 20,
            bottom: 10,
            top: 40,
          },
          xAxis: {
            axisLabel: {
              color: "#c0c3cd",
              fontSize: 12,
              interval: 0,
              rotate: -45,
            },
            axisTick: {
              lineStyle: {
                color: "#384267",
              },
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#306268",
                width: 3,
              },
              show: true,
            },
            data: pieName1,
            type: "category",
          },
          yAxis: {
            axisLabel: {
              color: "#c0c3cd",
              fontSize: 12,
            },
            axisTick: {
              lineStyle: {
                color: "#384267",
                width: 1,
              },
              show: true,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#0A2A35",
                type: "solid",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#384267",
                width: 1,
                type: "dashed",
              },
              show: false,
            },
            name: "",
          },
          series: [
            {
              data: pieData1,
              type: "bar",
              barMaxWidth: "auto",
              barWidth: 20,
              itemStyle: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: "linear",
                  global: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#0b9eff",
                    },
                    {
                      offset: 1,
                      color: "#63caff",
                    },
                  ],
                },
                normal: {
                  //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                  barBorderRadius: [100, 100, 0, 0],
                  color: {
                    type: "linear",
                    x: 1,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "#09F8BC", //  0%  处的颜色
                      },
                      // {
                      //   offset: 0.4,
                      //   color: '#045F56', //  100%  处的颜色
                      // },
                      {
                        offset: 1,
                        color: "#031E2A", //  100%  处的颜色
                      },
                    ],
                    global: false, //  缺省为  false
                  },
                },
              },
              label: {
                show: false,
                position: "top",
                distance: 10,
                color: "#fff",
              },
            },
            {
              show: false,
              data: [1, 1, 1, 1, 1, 1, 1],
              type: "pictorialBar",
              barMaxWidth: "20",
            },

            {
              data: [741, 741, 741, 741, 741, 741, 741],
              type: "bar",
              barMaxWidth: "auto",
              barWidth: 20,
              barGap: "-100%",
              zlevel: -1,
              itemStyle: {
                normal: {
                  //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                  barBorderRadius: [100, 100, 0, 0],
                  color: "#0A2C39",

                  // color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  //   {
                  //     offset: 0,
                  //     color: "#00feff",
                  //   },
                  //   {
                  //     offset: 0.5,
                  //     color: "#027eff",
                  //   },
                  //   {
                  //     offset: 1,
                  //     color: "#0286ff",
                  //   },
                  // ]),
                },
              },
            },
            {
              data: [1, 1, 1, 1, 1, 1, 1],
              type: "pictorialBar",
              barMaxWidth: "20",
              symbol: "diamond",
              symbolOffset: [0, "50%"],
              symbolSize: [30, 15],
              zlevel: -2,
            },
            {
              data: [741, 741, 741, 741, 741, 741, 741],
              type: "pictorialBar",
              barMaxWidth: "20",
              symbol: "diamond",
              symbolOffset: [0, "-50%"],
              symbolSize: [30, 12],
              zlevel: -1,
            },
          ],
          tooltip: {
            trigger: "axis",
            show: false,
          },
        };

        // 改变屏幕大小图表重新加载
        let resizeDiv = this.$refs.mileage; // 这个是渲染echarts的div
        let listener = () => {
          mileageEcharts.resize();
        };
        EleResize.on(resizeDiv, listener);
        this.option = option;
        option && mileageEcharts.setOption(option, true);

        // 鼠标事件
        let pieChart = mileageEcharts;
        //鼠标移出之后，恢复自动高亮
        pieChart.on("mouseout", function (param) {
          if (!isSet) {
            clearInterval(_this.startCharts);
            _this.startCharts = setInterval(chartHover, 2000);
            flag = true;
          }
        });

        //自动高亮显示
        var chartHover = function () {
          var dataLen = option.series[0].data.length;
          // 取消之前高亮的图形
          pieChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: index,
          });
          index = (index + 1) % dataLen;
          // 高亮当前图形
          pieChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: index,
          });
          pieChart.setOption(option, true);
          // 显示 tooltip
          pieChart.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: index,
          });
        };
        if (!_this.startCharts) {
          _this.startCharts = setInterval(chartHover, 3000);
        } else {
          clearInterval(_this.startCharts);
          _this.startCharts = setInterval(chartHover, 3000);
        }

        // 鼠标移动上去的时候的高亮动画
        pieChart.on("mouseover", function (param) {
          flag = false;
          isSet = false;
          clearInterval(_this.startCharts);
          //取消之前高亮图形
          pieChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: index,
          });
          index = param.dataIndex;
          //**解决文章所述问题**// //记录上一次选中值重新进入时取消高亮
          //高亮当前图形
          pieChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: param.dataIndex,
          });
          //显示tooltip
          pieChart.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: param.dataIndex,
          });

          pieChart.setOption(option, true);
        });
        // 先执行一遍自适应窗口
        mileageEcharts.resize();
      });
    },
  },
  beforeDestroy() {
    if (mileageEcharts) {
      mileageEcharts.dispose();
      mileageEcharts = null;
    }
  },
};
</script>
<style lang="scss" scoped>
.pie-container {
  width: 100%;
  height: 100%;
}
</style>
